<template>
  <div class="root">
    <div class="sucess" v-if="payvalue === 1">
      <div class="header">
        <img class="image" src="../../assets/zhifuchenggong.png" alt="">
        <div class="text">预计 10分钟之内收到审核结果，请注意短信通知和审核人员添加您的微信好友注意及时通过好友认证</div>
      </div>
<!--      入驻信息-->
      <div class="roomifr">
        <div class="title">
          <div class="block"></div>
          <div class="text">入驻信息已提交审核</div>
        </div>
        <div class="name">商家名称：<span class="span1">{{Results.name}}</span></div>
        <div class="adress">
          <div class="adrleft">商家地址：</div>
          <div class="adrright">{{Results.address}}</div>
        </div>
        <div class="name">联系电话：<span class="span1">{{Results.phone}}</span></div>
        <div class="name">所属行业：<span class="span1">{{Results.profession}}</span></div>
        <div class="name">覆盖范围：<span class="span1">{{Results.coverRadius}}</span></div>
        <div class="schedule">
          <div class="contactservice" @click="toservice">联系客服加速审核</div>
          <div class="progress" @click="lookschedule">查看审核进度</div>
        </div>
      </div>
<!--      订单信息-->
      <div class="oderifr">
        <div class="title">
          <div class="block"></div>
          <div class="text">订单信息</div>
        </div>
<!--        套餐类型的-->
        <div class="orderone">
          <div class="name">购买套餐:</div>
          <div class="value">{{Results.productName}}</div>
        </div>
        <div class="ordertwo">
          <div class="name">订单总额：</div>
          <div class="value">￥{{Results.money + Results.discountMoney}}</div>
        </div>
        <div class="orderthree">
          <div class="name">优惠金额：</div>
          <div class="value">-￥{{Results.discountMoney}}</div>
        </div>
        <div class="orderthree">
          <div class="name">购实付款：</div>
          <div class="value">￥{{Results.money}}</div>
        </div>
        <div class="hr"></div>
        <div class="orderfour">
          <div class="name">订单编号：</div>
          <div class="value" v-clipboard:copy="$route.query.orderNum" v-clipboard:success="Copy">
            <div class="ordernum">{{$route.query.orderNum}}</div>
            <div class="copy"> |  复制</div>
          </div>
        </div>
        <div class="orderone">
          <div class="name">下单时间：</div>
          <div class="value">{{Results.createTime}}</div>
        </div>
        <div class="orderone">
          <div class="name">支付方式：</div>
          <div class="value">{{Results.payType === 'WX_H5'? '微信支付':'支付宝支付'}}</div>
        </div>
<!--        联系客服-->
        <div class="service" @click="toservice">对订单有疑问   联系客服</div>
      </div>
    </div>
<!--    未支付的情况-->
    <div class="befter" v-else>
      <div class="hader">
        <img class="image1" src="@/assets/zfsb.png">
        <img class="image2" src="../../assets/shibai.png">
      </div>
      <div class="oderifr">
        <div class="title">支付遇到问题，请尝试重新支付</div>
        <!--        套餐类型的-->
        <div class="orderfour">
          <div class="name">订单编号：</div>
          <div class="value" v-clipboard:copy="$route.query.orderNum" v-clipboard:success="Copy">
            <div class="ordernum">{{$route.query.orderNum}} </div>
            <div class="copy"> |  复制</div>
          </div>
        </div>

        <div class="orderone">
          <div class="name">下单时间：</div>
          <div class="value">{{Results.createTime}}</div>
        </div>
        <div class="orderone">
          <div class="name">支付方式：</div>
          <div class="value">{{Results.payType === 'WX_H5'? '微信支付':'支付宝支付'}}</div>
        </div>
        <div class="orderone">
          <div class="name">购买套餐:</div>
          <div class="value">{{Results.productName}}</div>
        </div>
        <div class="ordertwo">
          <div class="name">订单总额：</div>
          <div class="value" v-if="Results.money">￥{{Results.money.toFixed(2)}}</div>
        </div>
        <!--        联系客服-->
        <div class="service" @click="repay">重新支付</div>
        <div class="repay" @click="requeryoder">我已支付，点击刷新订单</div>
      </div>

      <div class="problem">
        <div class="title">
          <div class="block"></div>
          <div class="text">遇到问题不要急哟，联系客服为您解决</div>
        </div>
        <div class="option">
<!--          <div class="yifabu">确认已发布</div>-->
          <div class="zxkf" @click="toservice">微信在线客服</div>
          <div class="dhzx" @click="callPhoneNumber">电话咨询</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryorders } from '@/api/payresult'
import { Toast } from 'vant'
export default  {
  name: 'PayResultIndex',
  data () {
    return {
      payvalue: 0, //支付成功还是失败
      Results: {}
    }
  },
   created () {
    console.log('链接上带的参数',this.$route.query)
    // 订单查询
     this.queryoder()
  },
  methods: {
    // 再次刷新订单
    requeryoder (){
      Toast.loading({
        message: '加载中...',
      });
      // 订单查询
      this.queryoder()
    },
    // 查询订单
    async queryoder () {
      const result = await queryorders(this.$route.query.orderNum)
      console.log('查询结果',result.data)
      this.payvalue = result.data.payState
      this.Results = result.data
    },
    // 重新支付
    repay () {
      window.location.href = this.Results.payUrl
    },
    // 在线客服
    toservice () {
      window.location.href = 'https://work.weixin.qq.com/kfid/kfc0a6023638057beb8';
    },
    // 拔打客服电话
    callPhoneNumber() {
      const phoneNumber = '052781985991';
      window.location.href = `tel:${phoneNumber}`;
    },
    // 复制成功
    Copy (e) {
      Toast('复制成功')
    },
      // 点击查看审核进度
    lookschedule () {
      this.$router.push({
        name: 'QueryPayIndex',
        query: {
          orderNum: this.$route.query.orderNum,
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
  .root{
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
    font-family: '思源黑体';
    background-color: rgba(229, 229, 229, 1);
    max-width: 375px;
    overflow: auto;
    //成功展示的内容
    .sucess{
      width: 375px;
      .header{
        width: 375px;
        height: 160px;
        background: linear-gradient(180deg, rgba(252, 68, 68, 1) 0%, rgba(252, 169, 169, 1) 100%);
        .image{
          width: 140px;
          height: 35px;
          margin: 40px 113px 10px 113px;
        }
        .text{
          width: 300px;
          height: 60px;
          height: 60px;
          margin: 0 auto;
          font-size: 12px;
          line-height: 20px;
          color: rgba(255, 255, 255, 1);
          text-align: center;
        }
      }
      .roomifr{
        width: 375px;
        border-radius: 20px;
        margin-top: -10px;
        padding-bottom: 20px;
        background-color: rgba(255, 255, 255, 1);
        .title{
          width: 350px;
          height: 30px;
          //border: 1px solid black;
          margin: 0 auto;
          margin-bottom: 10px;
          padding-top: 16px;
          display: flex;
          .block{
            width: 3px;
            height: 20px;
            background-color: rgba(255, 87, 51, 1);
            margin: 5px 6px 0 0 ;
          }
          .text{
            width: 171px;
            height: 30px;
            font-size: 18px;
            font-weight: 700;
            line-height: 30px;
            color: rgba(0, 0, 0, 1);
          }
        }
        .name{
          width: 330px;
          height: 30px;
          //background-color: pink;
          margin: 0 auto;
          margin-bottom: 10px;
          font-size: 14px;
          line-height: 30px;
          color: rgba(128, 128, 128, 1);
          .span1{
            color: rgba(0, 0, 0, 1);
          }
        }
        .adress{
          width: 330px;
          margin: 0 auto;
          margin-bottom: 10px;
          font-size: 14px;
          color: rgba(128, 128, 128, 1);
          display: flex;
          .adrleft{
            width: 70px;
            height: 30px;
            line-height: 30px;
            //background-color: #4d97ff;
          }
          .adrright{
            width: 250px;
            color: rgba(0, 0, 0, 1);
            line-height: 30px;
          }
        }
        .schedule{
          width: 350px;
          height: 45px;
          margin: 0 auto;
          margin-top: 20px;
          display: flex;
          justify-content: space-around;
          .contactservice{
            width: 165px;
            height: 40px;
            background-color: #fff;
            border-radius: 20px;
            border: 1px solid rgba(255, 87, 51, 1);
            font-size: 16px;
            line-height: 40px;
            color: rgba(255, 87, 51, 1);
            text-align: center;
          }
          .progress{
            width: 165px;
            height: 40px;
            background-color: rgba(255, 87, 51, 1);
            border-radius: 20px;
            border: 1px solid rgba(255, 87, 51, 1);
            font-size: 16px;
            line-height: 40px;
            color: #fff;
            text-align: center;
          }
        }
      }
      .oderifr{
        width: 375px;
        border-radius: 20px;
        margin-top: 10px;
        padding-bottom: 20px;
        background-color: rgba(255, 255, 255, 1);
        .title{
          width: 350px;
          height: 30px;
          //border: 1px solid black;
          margin: 0 auto;
          margin-bottom: 10px;
          padding-top: 16px;
          display: flex;
          .block{
            width: 3px;
            height: 20px;
            background-color: rgba(255, 87, 51, 1);
            margin: 5px 6px 0 0 ;
          }
          .text{
            width: 171px;
            height: 30px;
            font-size: 18px;
            font-weight: 700;
            line-height: 30px;
            color: rgba(0, 0, 0, 1);
          }
        }
        .orderone{
          width: 330px;
          height: 30px;
          margin: 0 auto;
          margin-bottom: 10px;
          font-size: 14px;
          line-height: 30px;
          display: flex;
          .name{
            width: 80px;
            height: 30px;
            font-size: 16px;
            line-height: 30px;
            color: rgba(0, 0, 0, 1);
          }
          .value{
            width: 250px;
            height: 30px;
            font-size: 14px;
            line-height: 30px;
            color: rgba(128, 128, 128, 1);
            text-align: right;
          }
        }
        .ordertwo{
          width: 330px;
          height: 30px;
          //background-color: pink;
          margin: 0 auto;
          margin-bottom: 10px;
          font-size: 14px;
          line-height: 30px;
          display: flex;
          .name{
            width: 80px;
            height: 30px;
            font-size: 16px;
            line-height: 30px;
            color: rgba(0, 0, 0, 1);
          }
          .value{
            width: 250px;
            height: 30px;
            font-size: 14px;
            line-height: 30px;
            color: #000;
            text-align: right;
          }
        }
        .orderthree{
          width: 330px;
          height: 30px;
          //background-color: pink;
          margin: 0 auto;
          margin-bottom: 10px;
          font-size: 14px;
          line-height: 30px;
          display: flex;
          .name{
            width: 80px;
            height: 30px;
            font-size: 16px;
            line-height: 30px;
            color: rgba(0, 0, 0, 1);
          }
          .value{
            width: 250px;
            height: 30px;
            font-size: 14px;
            line-height: 30px;
            color: rgba(255, 87, 51, 1);
            text-align: right;
          }
        }
        .orderfour{
          width: 330px;
          height: 30px;
          //background-color: pink;
          margin: 0 auto;
          margin-bottom: 10px;
          font-size: 14px;
          line-height: 30px;
          display: flex;
          .name{
            width: 80px;
            height: 30px;
            font-size: 16px;
            line-height: 30px;
            color: rgba(0, 0, 0, 1);
          }
          .value{
            width: 250px;
            height: 30px;
            font-size: 14px;
            //background-color: pink;
            color: rgba(128, 128, 128, 1);
            display: flex;
            .ordernum{
              width: 200px;
              height: 30px;
              //background-color: #4d97ff;
              text-align: right;
              line-height: 30px;

            }
            .copy{
              width: 45px;
              height: 30px;
              //background-color: #07c160;
              color: rgba(0, 0, 0, 1);
              text-align: right;
              line-height: 30px;
              margin-left: 2px;
            }
          }
        }
        .hr{
          width: 350px;
          height: 1px;
          border-top: 1px solid rgba(229, 229, 229, 1);
          margin: 0 auto;
          margin-bottom: 10px;
        }
        .service{
          width: 280px;
          height: 40px;
          border: 1px solid rgba(128, 128, 128, 1);
          border-radius: 20px;
          margin: 0 auto;
          margin-top: 20px;
          font-size: 18px;
          line-height: 40px;
          color: rgba(128, 128, 128, 1);
          text-align: center;
        }
      }
    }
    //失败时候展示的内容
    .befter{
      width: 375px;
      .hader{
        width: 375px;
        height: 180px;
        padding-top: 20px;
        background: linear-gradient(180deg, rgba(255, 141, 26, 1) 0%, rgba(255, 87, 51, 1) 100%);
        .image1{
          width: 120px;
          height: 30px;
          display: block;
          margin: 0 auto;
        }
        .image2{
          width: 200px;
          height: 200px;
          display: block;
          margin: 0 auto;
        }
      }
      .oderifr{
        width: 375px;
        border-radius: 20px;
        margin-top: -10px;
        padding: 30px 0 20px 0;
        background-color: rgba(255, 255, 255, 1);
        .title{
          width: 350px;
          height: 30px;
          //border: 1px solid black;
          padding-top: 16px;
          font-size: 20px;
          font-weight: 500;
          line-height: 30px;
          color: rgba(56, 56, 56, 1);
          text-align: center;
          margin: 0 auto;
          margin-bottom: 20px;
        }
        .orderone{
          width: 330px;
          height: 30px;
          margin: 0 auto;
          margin-bottom: 10px;
          font-size: 14px;
          line-height: 30px;
          display: flex;
          .name{
            width: 80px;
            height: 30px;
            font-size: 16px;
            line-height: 30px;
            color: rgba(0, 0, 0, 1);
          }
          .value{
            width: 250px;
            height: 30px;
            font-size: 14px;
            line-height: 30px;
            color: rgba(128, 128, 128, 1);
            text-align: right;
          }
        }
        .ordertwo{
          width: 330px;
          height: 30px;
          //background-color: pink;
          margin: 0 auto;
          margin-bottom: 10px;
          font-size: 14px;
          line-height: 30px;
          display: flex;
          .name{
            width: 80px;
            height: 30px;
            font-size: 16px;
            line-height: 30px;
            color: rgba(0, 0, 0, 1);
          }
          .value{
            width: 250px;
            height: 30px;
            font-size: 14px;
            line-height: 30px;
            color: #000;
            text-align: right;
          }
        }
        .orderthree{
          width: 330px;
          height: 30px;
          //background-color: pink;
          margin: 0 auto;
          margin-bottom: 10px;
          font-size: 14px;
          line-height: 30px;
          display: flex;
          .name{
            width: 80px;
            height: 30px;
            font-size: 16px;
            line-height: 30px;
            color: rgba(0, 0, 0, 1);
          }
          .value{
            width: 250px;
            height: 30px;
            font-size: 14px;
            line-height: 30px;
            color: rgba(255, 87, 51, 1);
            text-align: right;
          }
        }
        .orderfour{
          width: 330px;
          height: 30px;
          //background-color: pink;
          margin: 0 auto;
          margin-bottom: 10px;
          font-size: 14px;
          line-height: 30px;
          display: flex;
          .name{
            width: 80px;
            height: 30px;
            font-size: 16px;
            line-height: 30px;
            color: rgba(0, 0, 0, 1);
          }
          .value{
            width: 250px;
            height: 30px;
            font-size: 14px;
            //background-color: pink;
            color: rgba(128, 128, 128, 1);
            display: flex;
            .ordernum{
              width: 200px;
              height: 30px;
              //background-color: #4d97ff;
              text-align: right;
              line-height: 30px;

            }
            .copy{
              width: 45px;
              height: 30px;
              //background-color: #07c160;
              color: rgba(0, 0, 0, 1);
              text-align: right;
              line-height: 30px;
              margin-left: 2px;
            }
          }
        }
        .hr{
          width: 350px;
          height: 1px;
          border-top: 1px solid rgba(229, 229, 229, 1);
          margin: 0 auto;
          margin-bottom: 10px;
        }
        .service{
          width: 280px;
          height: 40px;
          border-radius: 20px;
          margin: 0 auto;
          margin-top: 20px;
          font-size: 18px;
          line-height: 40px;
          color: #fff;
          text-align: center;
          background-color: rgba(255, 87, 51, 1);
        }
        .repay{
          width: 280px;
          height: 40px;
          margin: 0 auto;
          margin-top: 10px;
          font-size: 18px;
          line-height: 40px;
          line-height: 40px;
          color: rgba(255, 87, 51, 1);
          text-align: center;
          text-decoration: underline;
        }
      }
      .problem{
        width: 375px;
        height: 120px;
        background-color: #fff;
        border-radius: 10px;
        margin: 6px 0;
        .title{
          width: 350px;
          height: 30px;
          //border: 1px solid black;
          margin: 0 auto;
          margin-bottom: 10px;
          padding-top: 16px;
          display: flex;
          .block{
            width: 4px;
            height: 18px;
            background-color: rgba(255, 87, 51, 1);
            margin: 6px 6px 0 0;
          }
          .text{
            width: 330px;
            height: 30px;
            font-size: 18px;
            font-weight: 700;
            line-height: 30px;
            //background-color: pink;
            color: rgba(0, 0, 0, 1);
          }
        }
        .option{
          width: 350px;
          height: 36px;
          margin: 0 auto;
          margin-top: 20px;
          margin-bottom: 20px;
          //background-color: pink;
          display: flex;
          justify-content: space-around;
          .yifabu{
            width: 110px;
            height: 32px;
            background-color: rgba(255, 87, 51, 1);
            border-radius: 15px;
            text-align: center;
            line-height: 32px;
            font-size: 14px;
            border: 1px solid rgba(255, 87, 51, 1);
            color: rgba(255, 255, 255, 1);
          }
          .zxkf{
            width: 160px;
            height: 32px;
            border-radius: 15px;
            text-align: center;
            line-height: 32px;
            font-size: 14px;
            border: 1px solid rgba(166, 166, 166, 1);
            color: rgba(56, 56, 56, 1);
          }
          .dhzx{
            width: 160px;
            height: 32px;
            border-radius: 15px;
            text-align: center;
            line-height: 32px;
            font-size: 14px;
            border: 1px solid rgba(166, 166, 166, 1);
            color: rgba(56, 56, 56, 1);
          }
        }
      }
    }
  }
</style>
